/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 17:49:48
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-16 17:06:54
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty,
	Spin,
	List
} from "antd";
import { LeftOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import styled from "styled-components";
import _ from "lodash";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import api from "@services/";
import { formatArr, formatOne } from "@/utils/format-show-type";
import { toLocaleString } from "@/utils/format";
import moment from "moment";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import { ThTable } from "@/components/ThTable";
import Footer from "@/components/Footer";


const extrinsicColumns = [
	{
		title: "Hash",
		dataIndex: "extrinsic_hash",
		key: "extrinsic_hash",
		width: "23%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "copy-link",
		link: '/extrinsic/{extrinsic_hash}'
	},
	{
		title: "Events",
		dataIndex: "events_num",
		key: "events_num",
		width: "8%",
		textWrap: "word-break",
		showType: "link",
		tpl: '/extrinsic/{extrinsic_hash}'
	},
	{
		title: "Method",
		dataIndex: "extrinsic_name",
		key: "extrinsic_name",
		width: "22%",
		textWrap: "word-break",
	},
	{
		title: "Result",
		dataIndex: "result",
		width: "15%",
		render: (text, record, index) => {
			return record.result ? (
				<span className="green">
					<CheckCircleOutlined /> Success
				</span>
			) : (
				<span className="red">
					<ExclamationCircleOutlined /> Failed
				</span>
			);
		},
		sorter: true
	},
];

const eventColumns = [
	{
		title: "Hash",
		dataIndex: "extrinsic_hash",
		key: "extrinsic_hash",
		width: "18%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "copy-link",
		link: '/extrinsic/{extrinsic_hash}'
	},
	{
		title: "Method",
		dataIndex: "event_name",
		key: "event_name",
		width: "18%",
		textWrap: "word-break",
	},
	{
		title: "Type",
		dataIndex: "event_type",
		key: "event_type",
		width: "18%",
		textWrap: "word-break",
	}
];

let blockHash = null;
function Main({ className }) {
	const navigator = useNavigate();
	const { q } = useParams();
	const [loading, setLoading] = useState(false);
	const [blockHeight, setBlockHeight] = useState(0);
	const [blockDetail, setBlockDetail] = useState({});

	const [totalExtrinsics, setTotalExtrinsics] = useState(0);
	const [totalEvents, setTotalEvents] = useState(0);
	const [tab, setTab] = useState('Extrinsics');

	const [extrinsicsProps, setExtrinsicsProps] = useState();
	const [eventsProps, setEventsProps] = useState();
	useEffect(() => {
		common.showAPIUrl();
	}, []);
	if (!q) {
		return message.error("blockHeight is not found");
	}
	console.log("blockHeight", blockHeight);
	//block.detail
	useEffect(async () => {
		if (window.location.href.indexOf('events') != -1) {
			setTab('Events');
		}
		if (q.indexOf('0x') == 0) {
			blockHash = q;
		} else {
			setBlockHeight(q);
		}
		let result = await api.block.detail(q, blockHash);
		if (result.msg != "ok") {
			return message.info(result.err || result.msg);
		}
		let o1 = formatOne({
			title: "Hash",
			dataIndex: "hash",
			key: "hash",
			width: "30%",
			sorter: true,
			showType: "copyLong",
		});
		let o2 = formatOne({
			title: "Hash",
			dataIndex: "parent_hash",
			key: "parent_hash",
			width: "30%",
			sorter: true,
			showType: "copyLong-link",
			link: '/block/{parent_hash}'
		});
		let o3 = formatOne({
			title: "all_gas_fee",
			dataIndex: "all_gas_fee",
			key: "all_gas_fee",
			showType: "currency-qianfen"
		});
		let detail = result.data;
		detail.hash = o1.render(detail.hash, detail);
		detail.parent_hash = o2.render(detail.parent_hash, detail);
		detail.all_gas_fee = o3.render(detail.all_gas_fee, detail);
		setBlockDetail(detail);
		if (blockHash) {
			setBlockHeight(detail.block_id);
		}
		setExtrinsicsProps({
			border: true,
			size: "middle",
			pagesize: 10,
			loadList: {
				params: {
					blockId: detail.block_id
				},
				method: api.extrinsics.list,
				cb: {
					total: setTotalExtrinsics
				}
			},
			table: {
				columns: extrinsicColumns
			}
		});
		//set event props
		setEventsProps({
			border: true,
			size: "middle",
			pagesize: 10,
			loadList: {
				params: {
					blockId: detail.block_id
				},
				method: api.event.list,
				cb: {
					total: setTotalEvents
				}
			},
			table: {
				columns: eventColumns
			}
		});
	}, [q]);

	return (
		<div className={className}>
			<div className="containner-in">
				<SearchBar background={"#f4f4f4"} height="100px" />
				<div className="content">
					<div className="top-title">
						<span onClick={() => navigator(-1)} className="link">
							<img src="/img/left.svg" width={7} />
							&nbsp;&nbsp;
						</span>
						<label>Blocks #{blockHeight}</label>
					</div>
					<Spin spinning={loading}>
						<Card title={<div><img src="/img/overview.png" width={12} /> Overview</div>}>
							<div className="table-content">
								<div className="block-list-box2">
									<div className="one-box">
										<label>Block</label>
										<span>#{toLocaleString(blockHeight)}</span>
									</div>
									<div className="one-box">
										<label>Extrinsics</label>
										<span>{toLocaleString(blockDetail.extrinsics_num)}</span>
									</div>
									<div className="one-box">
										<label>Events</label>
										<span>{toLocaleString(blockDetail.all_events_num)}</span>
									</div>
									<div className="one-box">
										<label>Gas Fee</label>
										<span><img src="/img/cess.png" width={16} /> {blockDetail.all_gas_fee}</span>
									</div>
									<div className="one-box">
										<label>Time ({common.getTimeZone()})</label>
										<span>{moment(blockDetail.timestamp).format('YYYY/MM/DD HH:mm:ss')}</span>
									</div>
									<div className="one-box">
										<label>Status</label>
										<span>Success</span>
									</div>
									<div className="one-box one-box2 box-hide"></div>
									<div className="one-box one-box2">
										<label>Hash</label>
										<span>{blockDetail.hash}</span>
									</div>
									<div className="one-box one-box2">
										<label>Parent Hash</label>
										<span>{blockDetail.parent_hash}</span>
									</div>
								</div>
							</div>
						</Card>
					</Spin>
					<Spin spinning={loading}>
						<div>
							<div className="o-title">
								<span className={tab == 'Extrinsics' ? 'curr' : 'uncurr'} onClick={() => setTab('Extrinsics')}>Extrinsics ({totalExtrinsics})</span>
								<span className={tab == 'Events' ? 'curr' : 'uncurr'} onClick={() => setTab('Events')}>Events ({totalEvents})</span>
							</div>
							<div className="pc-list">
								<div className={tab == 'Extrinsics' ? 'list' : 'none'}>
									<ThTable props={extrinsicsProps} />
								</div>
								<div className={tab == 'Events' ? 'list' : 'none'}>
									<ThTable props={eventsProps} />
								</div>
							</div>
							<div className="mobile-list">
								<div className={tab == 'Extrinsics' ? 'list' : 'none'}>
									<MList props={extrinsicsProps} />
								</div>
								<div className={tab == 'Events' ? 'list' : 'none'}>
									<MList props={eventsProps} />
								</div>
							</div>
						</div>
					</Spin>
				</div>
				<Footer />
			</div>
		</div>
	);
}

export default styled(Main)`
	display: block;
	overflow: hidden;
	/* padding: 20px; */
	margin: 0 auto;
	.none{
		display: none;
	}
	.b1 {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.bt {
			border-top: 4px solid #f0f0f0;
		}
		.br {
			border-right: 4px solid #f0f0f0;
		}
		.bb {
			border-bottom: 4px solid #f0f0f0;
		}
		.bl {
			border-left: 4px solid #f0f0f0;
		}
		div {
			border-collapse: collapse;
			text-indent: 10px;
			line-height: 50px;
		}
		.b2-1 {
			width: 100%;
		}
		.b2-2 {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.b3-1 {
				width: 25%;
			}
			.b3-2 {
				flex: 1;
				display: flex;
				flex-direction: column;
				.b4-1 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
				.b4-2 {
					display: flex;
					flex-direction: row;
					align-items: center;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
						display: flex;
						flex-direction: column;
						.b6-1 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
						.b6-2 {
							display: flex;
							flex-direction: row;
							.b7-1 {
								width: 50%;
							}
							.b7-2 {
								flex: 1;
							}
						}
					}
				}
				.b4-3 {
					display: flex;
					flex-direction: row;
					.b5-1 {
						width: 33.33%;
					}
					.b5-2 {
						flex: 1;
					}
				}
			}
		}
	}
	.top-title {
		display: block;
		font-size: 18px;
		line-height: 80px;
	}
	.table-content {
		background-color: #fff;
		.ant-descriptions-header {
			margin-bottom: 0 !important;
			padding: 10px;
		}
	}
	pre {
		background-color: #999;
		color: #fff;
		padding: 20px;
	}	
	.o-title {
		display: flex;
		width: 100%;
		margin-top: 40px;
		overflow: hidden;
		flex-direction: row;
		align-items: center;
		span{
			padding: 0 14px;
			height: 50px;
			line-height: 50px;			
			text-align: center;
			overflow: hidden;
			display: block;
			margin-right:10px;
			border-radius: 5px;
		}
		.curr{
			background-color: #000000;
			color: #ffffff;
			cursor: not-allowed;
		}
		.uncurr{
			background-color: #eeeeee;
			color: #aeaeae;
			cursor: pointer;
		}
	}
	@media screen and (min-width: 801px) {
		.pc-list {
			display: block;
		}
		.mobile-list {
			display: none;
		}
		.ant-card .ant-card-body {
			padding: 1px 13px !important;
		}
		.block-list-box2 {
			position: relative;
			padding: 4px 10px;
			width: 100%;
			line-height: 27px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.one-box {
				width: 25%;
				display: flex;
				flex-direction: column;
				margin: 24px 0;
				label {
					font-size: 13px;
					color: #6b7486;
				}
				span {
					font-size: 18px;
					color: #282e39;
				}
			}
			.one-box2 {
				width: 50% !important;
			}
		}
	}
	@media screen and (max-width: 800px) {
		.pc-list {
			display: none;
		}
		.mobile-list {
			display: block;
		}
		.ant-card-body{
			padding:15px!important;
		}
		.block-list-box2 {
			position: relative;
			width: 100%;
			line-height: 27px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.one-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 9px 0;
				justify-content: space-between;
				label {
					font-size: 16px;
					color: #6b7486;
				}
				span {
					font-size: 18px;
					color: #282e39;
				}
			}
			.one-box2{
				flex-direction: column!important;
			}
			.box-hide{
				display: none!important;
			}
		}
	}
	
`;
